<!--
 * @Author: JohnYang
 * @Date: 2020-11-07 13:24:17
 * @LastEditors: JohnYang
 * @LastEditTime: 2020-11-08 15:55:13
-->
<script>
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import { Prop, Provide } from 'vue-property-decorator'
  @Component({
    name: 'BaseDialog',
  })
  export default class BaseDialog extends Vue {
    visible = false

    t = ''

    loading = false

    attrs = {}

    get title() {
      return this.t
    }

    get confirmBtnText() {
      return '确定'
    }

    get cancelBtnText() {
      return '取消'
    }

    setTitle(title) {
      this.t = title
    }

    open() {
      console.log('弹窗打开，我啥也不做')
    }

    opened() {
      console.log('弹窗打开，我啥也不做')
    }

    showLoading() {
      this.loading = true
    }

    closeLoading() {
      this.loading = false
    }

    openDialog() {
      this.visible = true
    }

    closeDialog() {
      if (this.loading) {
        this.$message.warning('请等待操作完成!')
        return
      }
      this.visible = false
    }

    onSubmit() {
      this.closeDialog()
    }

    onClose() {
      this.closeDialog()
    }
    /**
     * 构建弹窗胡Body
     */
    _createBody(h) {
      var slotBody = this.$scopedSlots['default'] || this.$slots['default']
      if (typeof slotBody === 'function') {
        return slotBody()
      }
      var renderBody = this.renderBody
      if (typeof renderBody === 'function') {
        return renderBody(h)
      }
    }

    /**
     * 构建弹窗的Footer
     */
    _createFooter(h) {
      var footer = this.$scopedSlots.footer || this.$slots.footer
      if (typeof footer == 'function') {
        return footer()
      }
      var renderFooter = this.renderFooter
      if (typeof renderFooter === 'function') {
        return renderFooter(h)
      }

      return this.defaultFooter(h)
    }

    defaultFooter(h) {
      return (
        <div slot="footer">
          <el-button
            type="danger"
            loading={this.loading}
            on-click={() => {
              this.onSubmit()
            }}
          >
            {this.confirmBtnText}
          </el-button>
          <el-button
            on-click={() => {
              this.onClose()
            }}
          >
            {this.cancelBtnText}
          </el-button>
        </div>
      )
    }

    createContainer(h) {
      var { title, ...rest } = Object.assign({}, this.attrs, this.$attrs)
      return (
        <el-dialog
          v-drag
          {...{
            props: {
              ...rest,
              visible: this.visible,
              'close-on-click-modal': false,
              title: this.title || title || '弹窗',
              beforeClose: this.onClose,
            },
            class: [rest.className || ''],
            on: {
              opened: () => {
                this.opened()
              },
              open: () => {
                this.open()
              },
            },
          }}
        >
          {this._createBody(h)}
          {this._createFooter(h)}
        </el-dialog>
      )
    }

    render(h) {
      return this.createContainer(h)
    }
  }
</script>
